import React from 'react'
import {List, DatePicker, InputItem, WhiteSpace, ActionSheet} from 'antd-mobile'
import { createForm } from 'rc-form'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../../reducers'
import {actions as SAction} from '../../../reducers/schedule'
import {actions as MAction} from '../../../reducers/milestone'

import {post} from '../../../axios'
import history from '../../../history'
import utils from '../../../common/utils'
import moment from 'moment'
import { saveProjectFlow } from '../../../sagas/projectSaga';

class AddSchedule extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          hasError: false,
          project_id: 0
        }
    }

    componentDidMount() {
      let project_id = utils.getQueryString('project_id', location.search)
      this.setState({project_id})
      this.props.get_milestone(project_id)
    }

    formatPickerData(arrs, label='title', value='id') {
      let data = []
      arrs.map(x=>data.push({label: x[label], value: x[value]}))
      return data
    }

    showActionSheet = (project_id, id) => {
      const BUTTONS = ['设置里程碑','添加项目进度','完成项目', '取消']
      ActionSheet.showActionSheetWithOptions({
          options: BUTTONS,
          cancelButtonIndex: BUTTONS.length - 1,
          maskClosable: true,
        },
        (buttonIndex) => {
          console.log(buttonIndex, BUTTONS[buttonIndex])
          if (buttonIndex===BUTTONS.length - 1) {return;}
          this.props.form.setFieldsValue({title: BUTTONS[buttonIndex]})
        });
  }

    submit = () => {
        this.props.form.validateFields((errors, value) => {
          console.log(errors,value)
          if (errors) {
            this.setState({hasError: true})
          } else {
            value.expect_at = moment(value.expect_at).format('YYYY-MM-DD')
            this.props.set_milestone(value, this.state.project_id)
          }
      });
    }
    render() {
        const { getFieldProps, getFieldError } = this.props.form,
        hasError = this.state.hasError
        return (
        <div className='form-div'>
            <WhiteSpace/>
            <List>  
              <DatePicker
              {...getFieldProps('expect_at',
                {rules: [{required: true, message: '请选择'}]}
              )}
                mode="date"
                extra="请选择"
              >
                <List.Item arrow="horizontal">进度时间</List.Item>
              </DatePicker>
              {getFieldError('expect_at')&&hasError?<div className='err-msg'>{getFieldError('expect_at')}</div>: null }                            
            </List>
            <WhiteSpace/>

            <List>
              <InputItem
                {...getFieldProps('title',
                  {rules: [{required: true, message: '里程碑名称必须填写'}]}
                )
                }
                clear
                ref={el => this.autoFocusInst = el}
              >里程碑名称</InputItem>
              {getFieldError('title')&&hasError?<div className='err-msg'>{getFieldError('title')}</div>: null }
            </List>
            <p style={styles.chose_templete} onClick={this.showActionSheet}>选择模版</p>
            <WhiteSpace/>
            <div className="btns">
              <a className="contact" onClick={()=>this.submit()}>提交</a>
            </div>
        </div>
        )
    }
}

function mapStateToProps(state) {
  return {
    milestone: state.milestone.list,
  }
}

function mapDispatchToProps(dispatch) {
  return  {
    get_milestone: bindActionCreators(MAction.get_milestone, dispatch),
    set_milestone: bindActionCreators(MAction.set_milestone, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(createForm()(AddSchedule))

const styles = {
  chose_templete: {
    textAlign: 'right',
    background: '#fff',
    padding: '5px',
    marginBottom: '0',
    color: '#0ea2ec'
  }
}